<template>
  <div>
    <div class="table-operator" v-if="operators && operators.length > 0">
      <div v-for="(item, index) in operators" :key="index" style="display: inline-block">
        <a-dropdown v-if="item.items && item.items.length > 0" :disabled="item.selection && noneSelected">
          <a-menu slot="overlay" @click="(e) => item.func(e.key, selectedRowKeys)">
            <a-menu-item v-for="(ev) in item.items" :key="ev.key"> {{ev.title}} </a-menu-item>
          </a-menu>
          <a-button :type="item.type" :icon="item.icon" :loading="loading"
                    > {{item.title}} <a-icon type="down" /> </a-button>
        </a-dropdown>
        <a-button v-else :type="item.type" :icon="item.icon"
                  @click="item.func(selectedRowKeys)" :loading="loading"
                    :disabled="item.selection && noneSelected">{{item.title}}</a-button>
      </div>

    </div>
    <a-table :data-source="data" :columns="columns" :pagination="pagination" :loading="loading" @change="change"
             :row-selection="selection ? { selectedRowKeys: selectedRowKeys, onChange: onSelectChange } : null">
      <div
              slot="filterDropdown"
              slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
              style="padding: 8px"
      >
        <a-input
                v-ant-ref="c => (searchInput = c)"
                :placeholder="`搜索${column.title}`"
                :value="selectedKeys[0]"
                style="width: 188px; margin-bottom: 8px; display: block;"
                @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
                @pressEnter="() => handleSearch(selectedKeys, confirm, column.dataIndex)"
        />
        <a-button
                type="primary"
                icon="search"
                size="small"
                style="width: 90px; margin-right: 8px"
                @click="() => handleSearch(selectedKeys, confirm, column.dataIndex)"
        >
          搜索
        </a-button>
        <a-button size="small" style="width: 90px" @click="() => handleReset(clearFilters)">
          清空
        </a-button>
      </div>
      <a-icon
              slot="filterIcon"
              slot-scope="filtered"
              type="search"
              :style="{ color: filtered ? '#108ee9' : undefined }"
      />
      <template slot="customRender" slot-scope="text, record, index, column">
      <span v-if="searchText && searchedColumn === column.dataIndex">
        <template
                v-for="(fragment, i) in text
            .toString()
            .split(new RegExp(`(?<=${searchText})|(?=${searchText})`, 'i'))"
        >
          <mark
                  v-if="fragment.toLowerCase() === searchText.toLowerCase()"
                  :key="i"
                  class="highlight"
          >{{ fragment }}</mark>
          <template v-else>{{ fragment }}</template>
        </template>
      </span>
        <template v-else>
          {{ text }}
        </template>
      </template>
      <template v-if="actions" slot="action" slot-scope="text, record">

      <span v-for="(action, index) in actions" :key="index">
        <a-divider v-if="index > 0" type="vertical" />
        <a @click="action.func(record)">{{action.title}}</a>
      </span>
      </template>
    </a-table>
  </div>
</template>

<script>
  export default {
    props: {
      loading: {
        type: Boolean,
        default: false
      },
      cols: {
        type: Array,
        required: true
      },
      data: {
        type: Array,
        default: () => null
      },
      actions: {
        type: Array,
        default: () => null
      },
      selection: {
        type: Boolean,
        default: false
      },
      operators: {
        type: Array,
        default: () => null
      },
      pagination: {
        default: () => false
      }
    },
    computed: {
      noneSelected() {
        return this.selectedRowKeys.length === 0;
      },
    },
    data() {
      const columns = []
      if (this.cols) {
        this.cols.forEach((item) => {
          let col = {}
          columns.push(col)
          col.title = item.title
          col.key = col.dataIndex = item.key
          if (item.search) {
            col.scopedSlots = {
              filterDropdown: 'filterDropdown',
              filterIcon: 'filterIcon',
              customRender: 'customRender',
            }
            col.onFilter =  (value, record) =>
                    record[item.key]
                            .toString()
                            .toLowerCase()
                            .includes(value.toLowerCase())
            col.onFilterDropdownVisibleChange = visible => {
              if (visible) {
                setTimeout(() => {
                  this.searchInput.focus();
                }, 0);
              }
            }
          }
        })
        if (this.actions && this.actions.length > 0) {
          columns.push({
            title: '操作',
            dataIndex: 'operational-action',
            scopedSlots: { customRender: 'action' }
          })
        }
      }

      return {
        searchText: '',
        searchInput: null,
        searchedColumn: '',
        selectedRowKeys: [],
        columns
      };
    },
    methods: {
      change (p) {
        this.pagination.current = p.current
        this.pagination.pageSize = p.pageSize
        this.$emit('change')
      },
      onSelectChange(selectedRowKeys) {
        this.selectedRowKeys = selectedRowKeys;
      },
      handleSearch(selectedKeys, confirm, dataIndex) {
        confirm();
        this.searchText = selectedKeys[0];
        this.searchedColumn = dataIndex;
      },
      handleReset(clearFilters) {
        clearFilters();
        this.searchText = '';
      }
    },
  };
</script>
<style lang="less" scoped>
  .highlight {
    background-color: rgb(255, 192, 105);
    padding: 0;
  }
</style>
